<template>
	<view class="content">
		<view class="strategy"><image src="../../static/env10.png" style="width: 48rpx;height: 48rpx;"></image><br>攻略</view>
		<view class="rolling">
			<text>商*三兑换现金红包10元！</text>
		</view>
		<view class="envelope">
			<view class="list">
				<image src="../../static/env07.png" style="width: 260rpx;height: 263rpx;"></image>
				<text style="margin: 16rpx 0;">商*波 兑换</text><br>
				<text class="cash">现金红包10元</text>
			</view>
			<view class="list">
				<image src="../../static/env07.png" style="width: 260rpx;height: 263rpx;"></image>
				<text style="margin: 16rpx 0;">商*波 兑换</text><br>
				<text class="cash">现金红包10元</text>
			</view>
		</view>
		<view class="equity">
			<view class="equ-line1">
				<text class="equ-text1">我的权益</text>
				<text class="equ-text2">活动机具<br>00005702881015425526</text>
				<text class="equ-text3">我的奖励></text>
			</view>
			<view class="income">
				<text class="inc-text1">累计获得收益(元)：</text>
				<text class="inc-text2">4.88</text>
			</view>
			<view class="endation">
				<text class="end-text1">推荐好友使用，可获得奖励</text>
				<text class="end-text2">去推荐</text>
			</view>
			<view class="detail">
				<view class="detail-line1">
					<image src="../../static/env08.png" style="width: 45rpx;height: 45rpx;float: left;margin-right: 12rpx;"></image>
					<text class="deta-text1">0</text>
					<text class="deta-text2">可使用权益分</text>
					<text class="deta-text3">查看明细</text>
				</view>
				<view class="detail-line2">
					<view class="trans">
						<text>累计活动交易</text><br>
						<text class="trans-text">3006</text>
					</view>
					<view class="trans">
						<text>待消耗活动交易</text><br> 
						<text class="trans-text">3006.00</text> 
					</view>
					<view class="trans"> 
						<text>待消耗奖励资格</text><br> 
						<text class="trans-text">0个</text> 
					</view>
				</view>
				<view class="detail-line3">
					<text class="exchange">兑现金红包</text>
				</view>
			</view>
		</view>
		<view class="rules">
			<view class="rules-line1">
				<text class="big-title">兑奖资格</text>
				<text style="float: right;">活动规则></text>
			</view>
			<view class="rules-line2">
				<text style="color: #989898;font-size: 36rpx;font-weight: 600;">暂无资格</text>
				<text class="nozg">收款满10000元可获得10现金红包</text>
			</view>
			<view class="rules-line3">
				<view></view>
				<view>
					<text>获取兑奖资格还需收款：</text> 
					<text style="color: #31055a;margin-top: 16rpx;">6994元</text>
				</view>
			</view>
		</view>
		<view class="zone">
			<text class="big-title">快速兑奖专区</text>
			<view>
				<image src="../../static/env05.png" style="width: 336rpx;height: 151rpx;margin-top: 30rpx;"></image>
			</view>
		</view>
		<view class="zone1">
			<text class="big-title">活动福利专区</text>
			<view>
				<image src="../../static/env06.png" style="width: 336rpx;height: 151rpx;margin-top: 30rpx;"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: ''
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style scoped>
	page{
		background: url(@/static/2.png) top center no-repeat #f6f6f6;
		background-size: contain;
		font-size: 26rpx;
		
	} 
	.big{
		display: flex;
		width: 100%;
	}
	.content {
		display: inherit;
		/* flex-direction: column;
		align-items: center;
		justify-content: center; */
		padding: 250rpx 30rpx 120rpx 30rpx;
		
	}
	.rolling{
		font-size: 24rpx;
		color: #fff;
		width: 87%;
		display: flex;
		padding: 0 0 48rpx 50rpx;
	}
	.strategy{
		position: absolute;
		top: 32rpx;
		right: 32rpx;
		height: 90rpx;
		width: 100rpx;
		color: #fff;
		text-align: center;
		background: #000;
		border-radius: 50%;
		opacity: 0.4;
		padding-top: 10rpx;
		font-size: 28rpx;
		line-height: 28rpx;
	}
	.envelope{
		display: inline-block;
		width: 100%;
	}
	.list{
		width: 40%;
		margin: 0 1%;
		background: #fff;
		border-radius: 30rpx;
		/* height: 280rpx; */
		text-align: center;
		float: left;
		color: #333;
		line-height: 36rpx;
		font-size: 24rpx;
	}
	.cash{
		background: #e8f0fb;
		display: inline-block;
		text-align: center;
		color: #251440;
		border-radius: 30rpx;
		padding: 4rpx 24rpx;
		margin: 10rpx 0 16rpx 0;
	}
	.equity{
		background: #fff;
		border-radius: 30rpx;
		margin-top: 30rpx;
		padding: 30rpx;
	}
	.equ-line1{
		margin-bottom: 30rpx;
		height: 80rpx;
	}
	.equ-text1{
		color: #323234;
		font-weight: 600;
		font-size: 32rpx;
		float: left;
		width: 25%;
	}
	.equ-text2{
		float: left;
		text-align: center;
		color: #9a9a9a;
		font-size: 26rpx;
		width: 50%;
	}
	.equ-text3{
		color: #303030;
		font-size: 28rpx;
		float: right;
		width: 25%;
		text-align: right;
	}
	.income{
		margin-bottom: 30rpx;
		background: #f2f6ff;
		border-radius: 30rpx;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
	}
	.inc-text1{
		color: #293436;
		font-size: 28rpx;
	}
	.inc-text2{
		color: #360473;
		font-size: 38rpx;
		font-weight: 600;
	}
	.endation{
		margin-bottom: 30rpx;
		background: #fcf0e2;
		border-radius: 30rpx;
		height: 90rpx;
	}
	.end-text1{
		color: #9e5f1c;
		font-weight: 600;
		font-size: 30rpx;
		line-height: 90rpx;
		margin-left: 30rpx;
	}
	.end-text2{
		border-radius: 30rpx;
		background: #f4d7af;
		color: #3e2f12;
		font-size: 28rpx;
		padding: 10rpx 28rpx;
		float: right;
		margin: 18rpx 30rpx 0 0;
	}
	.detail{
		margin-top: 30rpx;
	}
	.deta-text1{
		color: #333;
		font-size: 40rpx;
		font-weight: 600;   
	}
	.deta-text2{
		margin: 0 16rpx;
	}
	.deta-text3{
		color: #330b6e;
		text-decoration: underline;
	}
	.detail-line2{
		margin:30rpx 0 ;
	}
	.trans{
		text-align: center;
		width: 33%;
		display: inline-block;
		color: #969696;
		line-height: 56rpx;
	}
	.trans-text{
		font-size: 36rpx;
		color: #323232;
		margin-top: 16rpx;
		font-weight: 600;
	}
	.detail-line3{
		text-align: center;
		padding-bottom: 30rpx;
		margin-top: 12rpx;
		display: inline-block;
		width: 100%;
	}
	.exchange{
		border-radius: 50rpx;
		background: #f4d8b0;
		color: #a25d1a;
		font-size: 32rpx;
		padding: 18rpx 120rpx;
	}
	.rules{
		margin-top: 30rpx;
		background: #fff;
		border-radius: 30rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}
	.rules-line1{
		
	}
	.rules-line2{
		margin: 30rpx 0;
		
	}
	.nozg{
		border-radius: 50rpx;
		background: #fcf0e2;
		color: #975823;
		font-size: 26rpx;
		padding: 8rpx 28rpx 8rpx 58rpx;
		margin-left: 20rpx;
		background: url(@/static/env09.png) top left no-repeat #fcf0e2;
		background-size: contain;
	}
	.rules-line3{
		color: #2e2e2e;
	}
	.zone{
		padding: 30rpx;
	}
	.zone1{
		padding: 0 30rpx 30rpx 30rpx;
	}
	.big-title{
		color: #333333;
		font-size: 36rpx;
		font-weight: 600;
	}
</style>
